<template>
    <app-layout>
        <section class="content-header">
            <h1>
                App 设置
                <small></small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
                <li><a href="#">大转盘</a></li>
                <li class="active">奖品列表</li>
            </ol>
        </section>

    <section class="content">
        <!-- Default box -->
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">奖品列表</h3>
            </div>
            <div class="box-body">
                <el-table
                    ref="multipleTable"
                    :data="records"
                    tooltip-effect="dark"
                    stripe
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                    type="selection"
                    width="55">
                    </el-table-column>
                   
                    <el-table-column
                        prop="id"
                        label="ID"
                        width="55">
                    </el-table-column>

                    <el-table-column
                        prop="prize_image"
                        label="奖品图片"
                        width="160">
                        <template slot-scope="scope">                        
                            <img :src="scope.row.prize_image" style="height: 100px; width: 100px;">
                        </template>
                    </el-table-column>                    

                    <el-table-column
                        prop="name"
                        label="奖品等级">
                    </el-table-column>

                    <el-table-column
                        prop="business_id"
                        label="商家ID">
                    </el-table-column>

                    <el-table-column
                        prop="activity_id"
                        label="活动ID">
                    </el-table-column>       

                    <el-table-column
                        prop="content"
                        label="奖品">
                    </el-table-column>   

                    <el-table-column
                        prop="count"
                        label="数量">
                    </el-table-column>   

                    <el-table-column
                        label="领奖时间" :formatter="formatReceiveTime" width="200">
                    </el-table-column>

                    <el-table-column
                        prop="expiry"
                        label="有效期">
                    </el-table-column>

                    <el-table-column
                        prop="receive_way"
                        label="领取方式"
                        :formatter="formatReceiveWay">
                    </el-table-column>

                    <el-table-column
                        prop="type"
                        label="奖项类型"
                        :formatter="formatType">
                    </el-table-column>                                                                                                                                          

                    <el-table-column
                    fixed="right"
                    label="操作"
                    width="200">
                    <template slot-scope="scope">
                        <el-button @click="$router.push('/turntable/prizes/' + scope.row.id + '/edit')" type="text" size="small">编辑</el-button>
                        <el-button @click="handleDelete(scope.$index, scope.row)" type="text" size="small">删除</el-button>
                    </template>
                    </el-table-column>    
                </el-table>
            </div>
            <!-- /.box-body -->
            <div class="box-footer">
                <el-button type="primary" size="small" @click="$router.push('/turntable/prizes/create?activity_id=' + $route.query.activity_id)">添加</el-button>
                <el-button @click="$router.go(-1)" size="small">取消</el-button>
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination.page"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="pagination.per_page"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total" class="pull-right">
                </el-pagination>            
            </div>
            <!-- /.box-footer-->
        </div>
        <!-- /.box -->
    </section>        

    </app-layout>
</template>

<script>
import * as API from "../../Consts/Api";
import Layout from "@/components/Layout";
import { time, strtotime } from "@/utils";
import service from "../../Services/PrizeService";

export default {
    components: {
        "app-layout": Layout
    },

    data() {
        return {
            records: [],
            // 多选
            multipleSelection: [],
            pagination: {
                page: 1,
                per_page: 5,
                total: 0,
            }
        };
    },

    created: function() {
        this.loadData(this.pagination.page);  

        this.interval = setInterval(() => { 
            this.loadData(this.pagination.page);
        }, 2000)          
    },

    beforeDestroy: function() {
        clearInterval(this.interval)
    },    

    methods: Object.assign({
        loadData(page) {

            const options = {
                params: {
                    activity_id: this.$route.query.activity_id,
                    per_page: this.pagination.per_page,
                    page: page >= 1 ? page : 1
                }
            };

            this.$http.get(API.PRIZES, options).then(response => {
                if (response.data.status == "no") {
                    this.$message({
                        message: response.data.message,
                        type: "error",
                        duration: 5000
                    });
                } else {
                    this.records = response.data.data;
                    this.pagination.total = response.data.total;
                }
            });
        },

        handleSelectionChange(val) {
            this.multipleSelection = val;
        },        

        handleSizeChange(per_page) {
            this.pagination.per_page = per_page;
            this.loadData();
        },
        handleCurrentChange(page) {
            this.pagination.page = page;
            this.loadData(page);
        }, 

        handleDelete(index, row) {

            this.$confirm('此操作将永久删除该奖品, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                this.$http
                    .delete(
                        API.PRIZES.concat('/' + row.id),
                    )
                    .then(response => {
                        if (response.data.status == "no") {
                            this.$message({
                                message: response.data.message,
                                type: "error",
                                duration: 5000
                            });
                        } else {
                            this.$message({
                                message: response.data.message,
                                type: "success",
                                duration: 5000
                            });
                            this.loadData();
                        }
                    });

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });            

        }            
    }, service)

};
</script>